<template>
  <div
    :class="['FCPageContainer', flex ? 'flexClass' : 'heightClass']"
    :style="customStyle"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'FCLayout',
  props: {
    alignSlef: String,
    flex: Number,
    height: String,
    border: String,
    backgroundColor: String,
    justifyContent: String,
    alignItem: {
      type: String,
      default: ''
    },
  },
  data() {
    return {}
  },
  computed: {
    customStyle() {
      return {
        '--alignSlef': this.alignSlef,
        '--flex': this.flex,
        '--height': this.height,
        '--border': this.border,
        '--backgroundColor': this.backgroundColor,
        '--justifyContent': this.justifyContent,
        '--alignItem': this.alignItem,
      }
    },
  },
}
</script>

<style scoped lang="less">
.FCPageContainer {
  align-self: var(--alignSlef);
  justify-content: var(--justifyContent);
  // background-color: var(--backgroundColor);
  align-items: var(--alignItem);
  border: var(--border);
  overflow-x: hidden;
}
.flexClass {
  flex: var(--flex);
}
.heightClass {
  height: var(--height);
}
</style>